<script setup>
import { countDeviceNum } from "@/api";
import Chart from "@/components/Chart/index.vue";
import textNumCol from "@/components/text-num-col";
const options = ref({});
options.value = {
    // color: ['#2db7f5', '#ff6600', '#921AFF', '#c32441', '#FF00FF', '#FF8EFF', '#53FF53'],
    color: ["#002a94", "#6eb5ef", "#ffce00", "#FF00FF", "#47ffff", "#8630f5"],
    tooltip: {
        trigger: "item",
        formatter: "{b}: {c} 万㎡",
        fontSize: 26,
    },
    series: [
        {
            name: "单位：万㎡",
            type: "pie",
            selectedMode: "single",
            radius: ["20%", "35%"],
            label: {
                formatter: "{a|{b}}\n  {b|{c}}",
                position: "inner",
                color: "#03e5fa",
                rich: {
                    a: {
                        color: "#fff",
                        // padding: [3, 4],
                        fontSize: 18,
                        align: "center",
                    },
                    b: {
                        color: "03e5fa",
                        fontSize: 20,
                        fontWeight: "bold",
                        // padding: [3, 4],
                        align: "left",
                    },
                },
            },
            labelLine: {
                length: 15,
            },
            data: [
                { value: 1000.11, name: "居民入网面积" },
                { value: 2000.11, name: "公建入网面积" },
            ],
        },
        {
            name: "单位：万㎡",
            type: "pie",
            radius: ["60%", "75%"],
            labelLine: {
                length: 10,
            },
            label: {
                // formatter: '{a|{b}}\n  {b|{c}}{per|万㎡} ',
                position: "outside",
                formatter: "{a|{b}}\n  {b|{c}}",
                backgroundColor: "#0b1c35",
                borderColor: "inherit",
                borderWidth: 1,
                fontSize: 16,
                borderRadius: 4,
                rich: {
                    a: {
                        color: "#fff",
                        padding: [7, 5, 0],
                        lineheight: "30px",
                        align: "center",
                        fontSize: 18,
                    },
                    b: {
                        color: "#03e5fa",
                        fontSize: 20,
                        fontWeight: "bold",
                        padding: [3, 4],
                        align: "left",
                    },
                },
            },
            data: [
                { value: 1000.11, name: "居民收费面积" },
                { value: 2000.11, name: "公建收费面积" },
                { value: 1000.11, name: "居民报停面积" },
                { value: 3000.11, name: "公建报停面积" },
            ],
        },
    ],
};
onMounted(() => {
    // echarts初始化
});
const ranqiData = {};
const grData = {};
const getData = () => {
    const ranqi = [
        [
            {
                num: 430.1,
                name: "用户总数",
                unit: "万户",
                span: 8,
            },
            {
                num: 200.1,
                name: "居民用户总数",
                unit: "万户",
                span: 8,
            },
            {
                num: 200.1,
                name: "商业用户总数",
                unit: "万户",
                span: 8,
            },
        ],
        [
            {
                num: 17.2,
                name: "安检完成用户数",
                unit: "万户",
                span: 8,
            },
            {
                num: 40.11,
                name: "安检完成率",
                unit: "%",
                span: 8,
            },
            {
                num: 40.11,
                name: "NB-Iot表替换率",
                unit: "%",
                span: 8,
            },
        ],
        [
            {
                num: 10,
                name: "营业厅数量",
                unit: "座",
                span: 12,
            },
            {
                num: 11,
                name: "服务中心数量",
                unit: "座",
                span: 12,
            },
        ],
    ];
    ranqiData.value = {
        title: "燃气",
        value: ranqi,
    };
};
getData();
</script>

<template>
    <div class="right-top flex">
        <textNumCol :datas="ranqiData"></textNumCol>
    </div>
</template>
